<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=”screen-orientation” content=”portrait”>
    <meta name=”x5-orientation” content=”portrait”>
    <meta name=”browsermode” content=”application”>
    <meta name=”x5-page-mode” content=”app”>
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="style.css">
    <script src="lib/vue.min.js"></script>
</head>
<body>
<div class="box">
    <header class="top">
        <span class="fl back"></span>
        <p>充值</p>
    </header>
    <div class="banner">
        <img src="images/banner.jpg">
    </div>
    <section class="recharge">
        <div class="recharge-list" :class="{'rechargeA':show===0}" @click="active(0)">
            <aside class="fl">
                <nav class="fl">
                    <img class="fl" src="images/m.png" />
                </nav>
                <section class="fl">
                    <p style="padding-left: 0.06rem;">5000金币</p>
                    <p class="show-gift">充就送1000金币</p>
                </section>
            </aside>
            <nav class="fr"><strong>￥19</strong>元</nav>
        </div>
        <div class="recharge-list" :class="{'rechargeA':show===1}" @click="active(1)">
            <aside class="fl">
                <nav class="fl">
                    <img class="fl" src="images/m.png" />
                </nav>
                <section class="fl">
                    <p style="padding-left: 0.06rem;">55000金币</p>
                    <p class="show-gift">充就送2000金币</p>
                </section>
            </aside>
            <nav class="fr"><strong>￥55</strong>元</nav>
        </div>
        <div class="recharge-list" :class="{'rechargeA':show===2}" @click="active(2)">
            <aside class="fl">
                <nav class="fl">
                    <img class="fl" src="images/m.png" />
                </nav>
                <section class="fl">
                    <p style="padding-left: 0.06rem;">110000金币</p>
                    <p class="show-gift">充就送3000金币</p>
                </section>
            </aside>
            <nav class="fr"><strong>￥100</strong>元</nav>
        </div>
        <div class="recharge-list" :class="{'rechargeA':show===3}" @click="active(3)">
            <aside class="fl">
                <nav class="fl">
                    <img class="fl" src="images/m.png" />
                </nav>
                <section class="fl">
                    <p style="padding-left: 0.06rem;">220000金币</p>
                    <p class="show-gift">充就送4000金币</p>
                </section>
            </aside>
            <nav class="fr"><strong>￥200</strong>元</nav>
        </div>
        <div class="recharge-list" :class="{'rechargeA':show===4}" @click="active(4)">
            <aside class="fl">
                <nav class="fl">
                    <img class="fl" src="images/m.png" />
                </nav>
                <section class="fl">
                    <p style="padding-left: 0.06rem;">330000金币</p>
                    <p class="show-gift">充就送5000金币</p>
                </section>
            </aside>
            <nav class="fr"><strong>￥300</strong>元</nav>
        </div>
    </section>
    <input type="button" value="充值" class="submit">
</div>
<script>
    new Vue({
        el:'.box',
        data:{
            show:0
        },
        methods:{
            active:function(num){
                this.show=num;
            }
        }
    });
</script>
</body>
</html>